<template>
<!--  <div>-->
<!--    <a href="https://vite.dev" target="_blank">-->
<!--      <img src="/vite.svg" class="logo" alt="Vite logo" />-->
<!--    </a>-->
<!--    <a href="https://vuejs.org/" target="_blank">-->
<!--      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />-->
<!--    </a>-->
<!--  </div>-->
<!--  <HelloWorld msg="Vite + Vue" />-->
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink><br>
<!--      <RouterLink to="/about?id='1'&title='我是querylu传参'" active-class="active">关于</RouterLink><br>-->
<!--      <RouterLink :to="{path:'/about', query: {-->
<!--        id: '1',-->
<!--        title: '我是query传参'-->
<!--      }}" active-class="active">关于</RouterLink><br>-->

<!--      <RouterLink :to="`/about/'1'/'我是params路径传参` " active-class="active">关于</RouterLink><br>-->
<!--      <RouterLink :to="`/about/'1'/'我是params路径传参` " active-class="active">关于</RouterLink><br>-->
      <RouterLink to="/state" active-class="active">state</RouterLink><br>
      <RouterLink to="/father" active-class="active">Father</RouterLink><br>


      <button @click="toHome">首页</button>
<!--      <button @click="toAbout">关于</button>-->
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
import {RouterLink,RouterView, useRouter} from 'vue-router'
const router = useRouter()
const toHome = () =>{
  router.push({
    path: "/home?id='1'&title='router传参'"
  })
}
// const toHome = () => {
//   router.push({
//     path: '/Home'
//   })
// }
</script>


<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
